/*
 * @Description: 评论表情包
 * @Autor: HuiSir<273250950@qq.com>
 * @Date: 2024-05-30 11:16:25
 * @LastEditTime: 2024-08-22 00:26:23
 */
import { ref } from "../utils/vue.esm.js"
import smilies from "./inc/smilies.js"
const template = /*html*/ `
<div :class="{'smilies-down':true, show:smiliesAnim, myemoji:true}">
  <img v-for="(item, index) in smilies" @click="bindImgClick(index)" class="smiley-img myemoji" :key="item.code" :src="isDev ? item.img : themePath + item.img.slice(1)" />
</div>
`
export default {
  name: 'Smiley',
  template,
  emits: ['smileClick'],
  setup (props, context) {
    const smiliesAnim = ref(false)

    const bindImgClick = (index) => {
      const smiley = smilies[index]
      const $comment = document.getElementById("comment")
      const tag = ` :${smiley.code}: `
      if ($comment && $comment.type == "textarea") {
        if (document.selection) {
          $comment.focus()
          sel = document.selection.createRange()
          sel.text = tag
          $comment.focus()
        } else if ($comment.selectionStart || $comment.selectionStart == "0") {
          var startPos = $comment.selectionStart
          var endPos = $comment.selectionEnd
          var cursorPos = endPos
          $comment.value =
            $comment.value.substring(0, startPos) +
            tag +
            $comment.value.substring(endPos, $comment.value.length)
          cursorPos += tag.length
          $comment.focus()
          $comment.selectionStart = cursorPos
          $comment.selectionEnd = cursorPos
        } else {
          $comment.value += tag
          $comment.focus()
        }
      }
      context.emit('smileClick',)
    }

    setTimeout(() => {
      smiliesAnim.value = true
    })

    return { smilies, bindImgClick, smiliesAnim, themePath:window.themeUriPath, isDev: window.isDev }
  },
}
